<!--
  Copyright 2020 The Chromium Authors. All rights reserved.
  Use of this source code is governed by a BSD-style license that can be
  found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Legacy color input</title>
    <style>
      #container {
        margin: 20px;
        padding: 0;
      }

      form {
        display: flex;
        align-items: flex-end;
        margin-bottom: 20px;
      }

      form input[type="submit"] {
        margin-left: 20px;
        padding: 10px;
        font-size: 20px;
        background: var(--color-primary);
        color: #fff;
        border: 1px solid var(--color-details-hairline);
        cursor: pointer;
      }

      form input[type="submit"]:hover {
        background: var(--color-primary-variant);
      }

     .text-input, span, pre {
       display: block;
       font-size: 16px;
     }

     .text-input input {
       display: block;
       margin: 10px 0 0 0;
       padding: 10px;
       border: 1px solid #ccc;
     }

     pre {
       margin: 10px 0;
       padding: 10px;
       border: 1px solid #ccc;
       user-select: all !important;
     }
    </style>
  </head>
  <body>
    <script type="module" src="./basic.js"></script>
    <div id="container">
      <form>
        <label class="text-input">
        CSS property:
          <input type="text" id="css-property" placeholder="background-color"/>
        </label>
        <label class="text-input">
          CSS value:
          <input type="text" id="css-value" placeholder="rgb(10 10 10)"/>
        </label>
        <input type="submit" value="Go!" />
      </form>

      <span>Dark mode legacy value:</span>
      <pre><code id="output"></code></pre>
    </div>
  </body>
</html>
